<template>
  <el-card class="short-link-group-container" v-if="$route.matched[$route.matched.length-1].name.split('.')[1] === 'link'">
    <div class="short-link-group-content">
      <div class="card-title">
        <div class="card-title-left">
          <h3>{{ props.groupTitle }}</h3>
          <span class="sub-title">共{{ createShortLink.shortLinkTotal }}个链接</span>
          <el-button type="primary" size="mini" @click="openCreateLinkDialog('create')">创建短链</el-button>
          <el-button type="primary" size="mini" plain @click="openCreateLinkDialog('batch')">批量创建</el-button>
        </div>
      </div>
      <div class="create-link-operate-box">
        <div class="create-link-operate-btn" v-if="createShortLink.showOperateSelect">
          <span class="select-length">已选择 {{ selectId.length }} 条</span>
          <el-link icon="el-icon-upload2" @click.prevent="exportSelect(selectId)">导出选中</el-link>
          <el-link icon="el-icon-download" @click.prevent="downloadSelect">下载选中二维码</el-link>
          <el-link icon="el-icon-folder-opened" @click.prevent="openMoveDialog(selectId)">转移分组</el-link>
          <el-link icon="el-icon-delete" @click.prevent="deleteShortLink(selectId)">移至回收站</el-link>
        </div>
        <div class="create-link-input" v-else>
          <el-input v-model.trim="createShortLink.queryName" placeholder="请输入短链标题或短网址的内容进行模糊搜索(每页将包含搜索内容的短链)" @keyup.enter="searchShort" @input="searchInput">
            <template #suffix>
              <i class="el-icon-search" @click="searchShort"></i>
            </template>
          </el-input>
        </div>
      </div>
      <el-table :data="createShortLink.shortLinkTableData" :border="false" @selection-change="selectTableCheckbox" v-loading="createShortLink.tableLoading" :max-height="createShortLink.tableMaxHeight" class="short-link-table">
        <template #empty>
          <div class="empty-box">
            <img class="empty-img" src="/img/404-images/empty.png" alt="暂无内容">
            <div>暂无数据</div>
          </div>
        </template>
        <el-table-column type="selection" width="35px">
        </el-table-column>
        <el-table-column label="短链信息" min-width="280px">
          <template #default="scope">
            <div class="short-link-info">
              <span class="short-link-title">{{ scope.row.name }}</span><br>
              <span class="short-link-date">
                {{ scope.row.create_time }} 一 {{ scope.row.invalid_end ? scope.row.invalid_end : '永久' }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="短链接网址" min-width="230px">
          <template #default="scope">
            <div class="short-link-box">
              <div class="short-link-content">
                <el-link type="primary" target="_blank" :href="`${scope.row.domain_name}/${scope.row.url}`">
                  {{ scope.row.domain_name }}/{{ scope.row.url }}
                </el-link>
                <br>
                <el-tooltip effect="dark" placement="top" popper-class="jump-link-popper">
                  <template #content>
                    <div v-for="item in scope.row.codeList" :key="item.id">
                      {{ item.to_url }}
                    </div>
                  </template>
                  <el-tag type="success" size="mini" v-if="scope.row.codeList?.length > 1">一对多跳转</el-tag>
                  <el-tag type="primary" size="mini" v-else>一对一跳转</el-tag>
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100px">
          <template #default="scope">
            <div class="btn-operate">
              <el-popover placement="bottom" :width="160" trigger="click" popper-class="download-qrcode-popper">
                <template #reference>
                  <img class="qrcode-icon-img" :src="imgRootSrc+'qrcode_icon.png'" alt="qrcode_icon" title="短链二维码">
                </template>
                <img :src="baseUrl+'/'+scope.row.code" width="160">
                <a :href="baseUrl+'/'+scope.row.code" :download="scope.row.name+'.png'" class="download-qrcode-btn">下载二维码</a>
              </el-popover>
              <img class="copy-icon-img" :src="imgRootSrc+'copy_icon.png'" alt="copy_icon" title="复制短链" @click="copyShort(`${scope.row.domain_name}/${scope.row.url}`)">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="短链状态">
          <template #default="scope">
            <span v-if="scope.row.state == 1" class="success-text">正常</span>
            <span v-else class="danger-text">已过期</span>
          </template>
        </el-table-column>
        <el-table-column width="50px">
          <template #default>
          <span class="cross-head">
            今日 <br>
            累计
          </span>
          </template>
        </el-table-column>
        <el-table-column label="访问次数" width="100px">
          <template #default="scope">
          <span class="cross-content">
            {{ scope.row.today_num }}<br>
            {{ scope.row.num }}
          </span>
          </template>
        </el-table-column>
        <el-table-column label="访问人数" width="100px">
          <template #default="scope">
          <span class="cross-content">
            {{ scope.row.today_people }}<br>
            {{ scope.row.people }}
          </span>
          </template>
        </el-table-column>
        <el-table-column width="50px">
          <div class="split-line"></div>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200px">
          <template #default="scope">
            <div class="operate-btn-group">
              <img src="/img/table-operate-images/curve_icon.png" alt="curve_icon" title="查看数据" @click="openStatistics(scope.row)">
              <img src="/img/table-operate-images/edit_icon.png" alt="edit_icon" title="编辑" @click="openEditDialog(scope.row)">
              <img src="/img/table-operate-images/cutover_icon.png" alt="cutover_icon" title="切换入口域名" @click="openChangeDomain(scope.row)" />
              <img src="/img/table-operate-images/delete_icon.png" alt="delete_icon" title="删除" @click="deleteShortLink([scope.row.id])">
              <el-dropdown>
                <img :src="imgRootSrc+'more_icon.png'" alt="more_icon">
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="$router.push(`/user-center/short-link-manage/${route.params.id}/plugin`)">插件管理</el-dropdown-item>
                    <el-dropdown-item @click="createCopy(scope.row)">创建副本</el-dropdown-item>
                    <el-dropdown-item @click="openMoveDialog([scope.row.id])">移动分组</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="createShortLink.queryForm.page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="createShortLink.queryForm.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="createShortLink.shortLinkTotal">
    </el-pagination>
  </el-card>

  <router-view v-else></router-view>

  <el-dialog :title="createShortLink.createDialogTitle" v-model="createShortLink.showCreateLinkDialog" width="500px" top="40px" custom-class="create-link-dialog" :close-on-click-modal="false" @closed="closeDialog('createLinkFormRef')" @opened="opendCreateDialog">
    <el-tabs v-model="createShortLink.activeName">
      <el-tab-pane name="oneToOne">
        <template #label>
          <div class="create-short-link-tab-title">
            <span class="iconfont icon-qiehuan"></span>
            一对一跳转
          </div>
        </template>
      </el-tab-pane>
      <el-tab-pane name="oneToMore">
          <template #label>
            <div class="create-short-link-tab-title">
              <span class="iconfont icon-xuanzhuan"></span>
              一对多跳转
            </div>
          </template>
        </el-tab-pane>
      <el-form class="create-short-link-form" ref="createLinkFormRef" :model="createLinkForm" label-position="top" :rules="shortLinkFormRules">
        <el-form-item label="跳转链接" prop="short[0].to_url" v-if="createShortLink.activeName === 'oneToOne'">
          <div class="jump-link-input">
            <el-input v-model.trim="createLinkForm.short[0].to_url" placeholder="请输入http://或http://开头的链接" clearable>
            </el-input>
          </div>
        </el-form-item>
        <div v-if="createShortLink.activeName === 'oneToMore'">
          <el-form-item
            v-for="(domain,index) in createLinkForm.short"
            :key="domain.id"
            :label="'跳转链接'+(index+1)"
            ref="toUrlRef"
            :prop="`short[${index}].to_url`"
            :rules="[
              { required: true, message: '请输入跳转链接' },
              { validator: validateUrl }
            ]"
          >
            <div class="jump-link-input">
              <el-input v-model.trim="domain.to_url" placeholder="请输入http://或http://开头的链接" clearable></el-input>
              <el-button class="remove-btn" type="danger" icon="el-icon-minus" circle @click="removeJumpLink(domain,'create')" v-if="createLinkForm.short.length > 1"></el-button>
            </div>
          </el-form-item>
          <div class="continue-adding" v-if="createShortLink.createLinkForm.short.length < 10" @click="addJumpLink(createShortLink.createLinkForm.short)">
            <i class="el-icon-plus"></i>继续添加
          </div>
          <el-alert title="如果跳转链接只有一条，那么创建的也是一对一跳转！" type="warning" show-icon class="jump-link-alert"></el-alert>
        </div>
        <el-form-item label="选择短链域名" prop="domain" class="custom-domain-item">
          <el-select v-model="createLinkForm.domain" placeholder="请选择短链域名" clearable>
            <el-option v-for="item in createShortLink.customDomainList" :key="item.id" :label="item.domain" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="短链标题" prop="name">
          <el-input v-model="createLinkForm.name" placeholder="请输入短链标题" clearable></el-input>
        </el-form-item>
        <el-form-item prop="rule" v-if="createShortLink.activeName === 'oneToMore'">
          <template #label>
            跳转模式
            <span class="iconfont icon-wenti_yiwen"></span>
            <span class="msg-tips">确认创建后，跳转模式将无法修改</span>
          </template>
          <el-radio-group v-model="createLinkForm.rule">
            <el-radio :label="1">记忆模式</el-radio>
            <el-radio :label="2">随机模式</el-radio>
          </el-radio-group>
          <el-alert :title="createLinkForm.rule === 1 ? '每个用户点击后，跳转的都是同一个链接' : '每个用户点击后，都会随机跳转一个链接'" type="warning" show-icon class="jump-moder-alert"></el-alert>
        </el-form-item>
        <div v-if="createShortLink.createDialogTitle !== '创建副本'">
          <el-divider content-position="center">自定义设置</el-divider>
          <el-form-item label="自定义设置" class="switch-form-item">
            <el-switch v-model="createShortLink.customSetting" @change="customSetChange($event,'create')"></el-switch>
          </el-form-item>
        </div>
        <div v-if="createShortLink.customSetting">
          <el-form-item label="自定义短链" prop="url">
            <el-input v-model.trim="createLinkForm.url" placeholder="请输入自定义短链(区分大小写)" maxlength="10">
            </el-input>
          </el-form-item>
          <el-form-item class="short-link-life" prop="invalid_end" ref="invalidEndRef">
            <template #label>
              短链有效期
              <span class="iconfont icon-wenti_yiwen"></span>
              <span class="msg-tips">自定义设置不开启短链有效期默认为永久</span>
            </template>
            <div class="short-link-life-content">
              <el-radio-group v-model="createShortLink.shortLinkValidity" @change="changeValidity">
                <el-radio label="permanent">永久</el-radio>
                <el-radio label="customize">自定义</el-radio>
              </el-radio-group>
              <el-date-picker v-model="createLinkForm.invalid_end" type="datetime" size="small" placeholder="请选择到期时间" @change="time => { createLinkForm.invalid_end = proxy.$filter('YYYY-mm-dd HH:MM:SS',time) }" v-if="createShortLink.shortLinkValidity === 'customize'"></el-date-picker>
            </div>
          </el-form-item>
          <el-alert title="短链失效后将自动跳转404页面" type="warning" show-icon v-if="createShortLink.shortLinkValidity === 'customize'">
          </el-alert>
          <div v-if="createShortLink.shortLinkValidity === 'customize'">
            <el-divider content-position="center">到期提醒</el-divider>
            <el-form-item label="到期通知" class="switch-form-item">
              <el-switch v-model="createShortLink.expirationNotice" @change="noticeChange"></el-switch>
            </el-form-item>
            <div v-if="createShortLink.expirationNotice">
              <el-form-item>
                <el-radio-group v-model="createShortLink.noticeMethod" @change="switchNotice" class="notice-radio">
                  <el-radio v-for="item in $store.state.userStore.noticeRadio" :label="item.value" :class="item.radioClass" v-show="item.text !== '手机'">
                    <div :class="item.imgBgClass">
                      <img :src="imgRootSrc+item.imgName+'.png'" :alt="item.imgName">
                    </div>
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="notice_setting_id" ref="noticeAccountRef">
                <el-select class="select-group" v-model="createLinkForm.notice_setting_id" placeholder="请选择通知账户" @change="selectNoticeAccount" v-if="switchingNotice || createShortLink.noticeAccountList.length > 0">
                  <el-option v-for="item in createShortLink.noticeAccountList" :key="item.id" :value="item.id" :label="item.phone" v-if="createShortLink.noticeMethod == 2 || createShortLink.noticeMethod == 3">
                  </el-option>
                  <el-option v-for="item in createShortLink.noticeAccountList" :key="item.id" :value="item.id" :label="item.email" v-else-if="createShortLink.noticeMethod == 1">
                  </el-option>
                  <el-option v-for="item in createShortLink.noticeAccountList" :key="item.id" :value="item.id" :label="item.name" v-else>
                  </el-option>
                </el-select>
                <div class="notice-set" v-else>
                  你当前未设置{{ createShortLink.noticeName }}通知，请前往
                  <el-button type="text" @click="openNoticeSet">通知账户设置</el-button>
                </div>
              </el-form-item>
              <el-form-item prop="section_time" label="通知时间">
                <el-date-picker
                  v-model="createLinkForm.section_time"
                  type="datetimerange"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
    </el-tabs>
    <template #footer>
      <el-button type="default" size="mini" @click="createShortLink.showCreateLinkDialog = false">取消</el-button>
      <el-button type="primary" size="mini" :loading="createShortLink.creating" @click="createShortChain">确定</el-button>
    </template>
  </el-dialog>

  <el-dialog title="编辑短链" v-model="editShortLink.showDialog" width="500px" top="80px" custom-class="edit-link-dialog" :close-on-click-modal="false" @close="editShortLink.afterRemove ? getShortLink($route.params.id) : ''" @closed="closeDialog('editShortLinkFormRef')">
    <el-form class="create-short-link-form" ref="editShortLinkFormRef" :model="editShortLink.formData" :rules="shortLinkFormRules" label-position="top">
      <el-form-item label="短链名称" prop="name">
        <el-input v-model.trim="editShortLink.formData.name" placeholder="请输入短链名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="被编辑的短链">
        <span class="edit-text">{{ editShortLink.editUrl }}</span>
      </el-form-item>
      <el-form-item
        v-for="(domain,index) in editShortLink.formData.short"
        :key="domain.id"
        :label="'跳转链接'+(index+1)"
        ref="toUrlRef"
        :prop="`short[${index}].to_url`"
        :rules="[
          { required: true, message: '请输入跳转链接' },
          { validator: validateUrl }
        ]"
      >
        <div class="jump-link-input">
          <el-input v-model.trim="domain.to_url" placeholder="请输入http://或http://开头的链接"></el-input>
          <el-button class="remove-btn" type="danger" icon="el-icon-minus" circle @click="removeJumpLink(domain,'edit')" v-if="editShortLink.formData.short.length > 1"></el-button>
        </div>
      </el-form-item>
      <div class="continue-adding" v-if="editShortLink.formData.short.length < 10" @click="addJumpLink(editShortLink.formData.short)">
        <i class="el-icon-plus"></i>继续添加
      </div>
      <div v-if="editShortLink.formData.short.length > 1">
        <el-form-item prop="rule">
          <template #label>
            跳转模式
            <span class="iconfont icon-wenti_yiwen"></span>
            <span class="msg-tips">确认创建后，跳转模式将无法修改</span>
          </template>
          <el-radio-group :model-value="editShortLink.formData.rule" disabled>
            <el-radio :label="1">记忆模式</el-radio>
            <el-radio :label="2">随机模式</el-radio>
          </el-radio-group>
          <el-alert :title="editShortLink.formData.rule ? '每个用户点击后，跳转的都是同一个链接' : '每个用户点击后，都会随机跳转一个链接'" type="warning" show-icon class="jump-moder-alert"></el-alert>
        </el-form-item>
      </div>
      <el-form-item label="自定义短链" prop="url">
        <el-input v-model.trim="editShortLink.formData.url" placeholder="请输入自定义短链(区分大小写)" maxlength="10">
        </el-input>
      </el-form-item>
      <el-form-item class="short-link-life" prop="invalid_end" ref="invalidEndRef">
        <template #label>
          短链有效期
          <span class="iconfont icon-wenti_yiwen"></span>
          <span class="msg-tips">自定义设置不开启短链有效期默认为永久</span>
        </template>
        <div class="short-link-life-content">
          <el-radio-group v-model="editShortLink.shortLinkValidity" @change="changeValidity">
            <el-radio label="permanent">永久</el-radio>
            <el-radio label="customize">自定义</el-radio>
          </el-radio-group>
          <el-date-picker v-model="editShortLink.formData.invalid_end" type="datetime" size="small" placeholder="请选择到期时间" @change="time => { editShortLink.formData.invalid_end = proxy.$filter('YYYY-mm-dd HH:MM:SS',time) }" v-if="editShortLink.shortLinkValidity === 'customize'"></el-date-picker>
        </div>
      </el-form-item>
      <el-alert title="短链失效后将自动跳转404页面" type="warning" show-icon v-if="editShortLink.shortLinkValidity === 'customize'">
      </el-alert>
      <div v-if="editShortLink.shortLinkValidity === 'customize'">
        <el-divider content-position="center">到期提醒</el-divider>
        <el-form-item label="到期通知" class="switch-form-item">
          <el-switch v-model="editShortLink.expirationNotice" @change="noticeChange"></el-switch>
        </el-form-item>
        <div v-if="editShortLink.expirationNotice">
          <el-form-item>
            <el-radio-group v-model="createShortLink.noticeMethod" @change="switchNotice" class="notice-radio">
              <el-radio v-for="item in $store.state.userStore.noticeRadio" :label="item.value" :class="item.radioClass" v-show="item.text !== '手机'">
                <div :class="item.imgBgClass">
                  <img :src="imgRootSrc+item.imgName+'.png'" :alt="item.imgName">
                </div>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="notice_setting_id" ref="noticeAccountRef">
            <el-select class="select-group" v-model="editShortLink.formData.notice_setting_id" placeholder="请选择通知账户" @change="selectNoticeAccount" v-if="switchingNotice || createShortLink.noticeAccountList.length > 0">
              <el-option v-for="item in createShortLink.noticeAccountList" :key="item.id" :value="item.id" :label="item.phone" v-if="createShortLink.noticeMethod == 2 || createShortLink.noticeMethod == 3">
              </el-option>
              <el-option v-for="item in createShortLink.noticeAccountList" :key="item.id" :value="item.id" :label="item.email" v-else-if="createShortLink.noticeMethod == 1">
              </el-option>
              <el-option v-for="item in createShortLink.noticeAccountList" :key="item.id" :value="item.id" :label="item.name" v-else>
              </el-option>
            </el-select>
            <div class="notice-set" v-else>
              你当前未设置{{ createShortLink.noticeName }}通知，请前往
              <el-button type="text" @click="openNoticeSet">通知账户设置</el-button>
            </div>
          </el-form-item>
          <el-form-item prop="section_time" label="通知时间">
            <el-date-picker
              v-model="editShortLink.formData.section_time"
              type="datetimerange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <template #footer>
      <el-button type="default" size="mini" @click="editShortLink.showDialog = false">取消</el-button>
      <el-button type="primary" size="mini" :loading="editShortLink.editing" @click="editShortUrl">保存</el-button>
    </template>
  </el-dialog>

  <el-dialog title="短链移动至" v-model="moveGroup.showMoveDialog" width="500px" custom-class="short-link-move-dialog" @closed="closeDialog('shortLinkMoveFormRef')">
    <el-form ref="shortLinkMoveFormRef" :model="moveGroup.moveForm" label-position="top">
      <el-form-item label="选择分组" prop="to_f_id" :rules="[{ required:true,message:'请选择分组' }]">
        <el-select v-model="moveGroup.moveForm.to_f_id" placeholder="选择分组">
          <el-option
            v-for="item in moveGroup.groupList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="default" size="mini" @click="moveGroup.showMoveDialog = false">取消</el-button>
      <el-button type="primary" size="mini" :loading="moveGroup.moving" @click="moveShortLink">确定</el-button>
    </template>
  </el-dialog>

  <el-dialog title="切换入口域名" v-model="changeDomain.domainDialog" width="500px" @closed="closeDialog('switchDomainFormRef')" custom-class="switch-domain-dialog">
    <el-form ref="switchDomainFormRef" :model="changeDomain.domainForm" label-position="top">
      <el-form-item label="选择短链域名" :rules="[{ required:true,message:'请选择短链域名' }]">
        <el-select v-model="changeDomain.domainForm.domain" placeholder="请选择短链域名">
          <el-option v-for="item in createShortLink.customDomainList" :key="item.id" :label="item.domain" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="default" size="mini" @click="changeDomain.domainDialog = false">取消</el-button>
      <el-button type="primary" size="mini" @click="cutoverDomain" :loading="changeDomain.changing">确定</el-button>
    </template>
  </el-dialog>

  <el-dialog title="批量创建" v-model="createShortLink.showBatchCreateLinkDialog" width="500px" top="40px" custom-class="create-link-dialog" :close-on-click-modal="false" @closed="closeDialog('batchCreateLinkFormRef')">
    <el-form class="create-short-link-form batch-create-short-link-form" :model="createLinkForm" :rules="shortLinkFormRules" ref="batchCreateLinkFormRef" label-position="top">
      <el-form-item prop="shortLink" class="textarea-input-item">
        <template #label>
          跳转链接
          <span class="short-length">
            {{ createLinkForm.shortLink.trim() ? [...new Set(createLinkForm.shortLink.split('\n').filter(item=>item.trim() !== ''))].length  : 0 }}/50
          </span>
        </template>
        <el-input type="textarea" :rows="4" :autosize="{ minRows: 4, maxRows: 4 }" placeholder="请输入 http:// 或 https:// 开头的链接或应用跳转链接，回车换行" v-model="createLinkForm.shortLink">
        </el-input>
      </el-form-item>
      <el-form-item prop="shortName" ref="shortNameItemRef" class="textarea-input-item">
        <template #label>
          短链标题
          <span class="short-length">
            {{ createLinkForm.shortName.trim() ? [...new Set(createLinkForm.shortName.split('\n').filter(item=>item.trim() !== ''))].length : 0 }}/50
          </span>
        </template>
        <el-input type="textarea" :rows="4" :autosize="{ minRows: 4, maxRows: 4 }" placeholder="根据跳转链接顺序输入短链标题，回车换行" v-model="createLinkForm.shortName">
        </el-input>
      </el-form-item>
      <el-form-item label="选择短链域名" prop="domain">
        <el-select v-model="createLinkForm.domain" placeholder="请选择短链域名" clearable>
          <el-option v-for="item in createShortLink.customDomainList" :key="item.id" :label="item.domain" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="短链有效期" class="short-link-life" prop="invalid_end" ref="invalidEndRef">
        <div class="short-link-life-content">
          <el-radio-group v-model="createShortLink.shortLinkValidity" @change="changeValidity">
            <el-radio label="permanent">永久</el-radio>
            <el-radio label="customize">自定义</el-radio>
          </el-radio-group>
          <el-date-picker v-model="createLinkForm.invalid_end" type="datetime" size="small" placeholder="请选择到期时间" @change="time => { createLinkForm.invalid_end = proxy.$filter('YYYY-mm-dd HH:MM:SS',time) }" v-if="createShortLink.shortLinkValidity === 'customize'"></el-date-picker>
        </div>
        </el-form-item>
      <el-alert title="短链失效后将自动跳转404页面" type="warning" show-icon v-if="createShortLink.shortLinkValidity === 'customize'">
      </el-alert>
      <div v-if="createShortLink.shortLinkValidity === 'customize'">
        <el-divider content-position="center">到期提醒</el-divider>
        <el-form-item label="到期通知" class="switch-form-item">
          <el-switch v-model="createShortLink.expirationNotice" @change="noticeChange"></el-switch>
        </el-form-item>
        <div v-if="createShortLink.expirationNotice">
          <el-form-item>
            <el-radio-group v-model="createShortLink.noticeMethod" @change="switchNotice" class="notice-radio">
              <el-radio v-for="item in $store.state.userStore.noticeRadio" :label="item.value" :class="item.radioClass" v-show="item.text !== '手机'">
                <div :class="item.imgBgClass">
                  <img :src="imgRootSrc+item.imgName+'.png'" :alt="item.imgName">
                </div>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="notice_setting_id" ref="noticeAccountRef">
            <el-select class="select-group" v-model="createLinkForm.notice_setting_id" placeholder="请选择通知账户" @change="selectNoticeAccount" v-if="switchingNotice || createShortLink.noticeAccountList.length > 0">
              <el-option v-for="item in createShortLink.noticeAccountList" :key="item.id" :value="item.id" :label="item.phone" v-if="createShortLink.noticeMethod == 2 || createShortLink.noticeMethod == 3">
              </el-option>
              <el-option v-for="item in createShortLink.noticeAccountList" :key="item.id" :value="item.id" :label="item.email" v-else-if="createShortLink.noticeMethod == 1">
              </el-option>
              <el-option v-for="item in createShortLink.noticeAccountList" :key="item.id" :value="item.id" :label="item.name" v-else>
              </el-option>
            </el-select>
            <div class="notice-set" v-else>
              你当前未设置{{ createShortLink.noticeName }}通知，请前往
              <el-button type="text" @click="openNoticeSet">通知账户设置</el-button>
            </div>
          </el-form-item>
          <el-form-item prop="section_time" label="通知时间">
            <el-date-picker
              v-model="createLinkForm.section_time"
              type="datetimerange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <template #footer>
      <el-button type="default" size="mini" @click="createShortLink.showBatchCreateLinkDialog = false">取消</el-button>
      <el-button type="primary" size="mini" :loading="createShortLink.creating" @click="batchCreate">确定</el-button>
    </template>
  </el-dialog>

  <DataStatistics ref="dataStatisticsRef" v-if="statisticsData.showStatisticsDialog" :statisticsData="statisticsData" @update:showStatisticsDialog="statisticsData.showStatisticsDialog = $event" />
</template>

<script setup>
import DataStatistics from '@/components/usersComponents/statistics/dataStatistics'
import { getCurrentInstance, reactive, ref, toRefs, onMounted, onUnmounted } from 'vue'
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
import { addShort, batchChange, checkShort, deleteCode, delShort, domainListApi, editShort, getShort, noticeSetList, switchDomain } from '@/axios/userRequest'
import validateF from '@/utils/validate'
import { copySome, downloadImgZip, getImgBase64 } from '@/utils/utils'
import baseUrl from '@/axios/baseUrl'
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const emit = defineEmits()
const imgRootSrc = '/img/my-short-chain-images/short-chain-management-images/'
const props = defineProps({
  groupTitle:String
})
// 创建短链表单数据
let createFormData = {
  shortLink: '',
  shortName: '',
  short: [{ to_url: '' }],
  type: 1,
  order: 1,
  state: 1,
  url: null,
  locking: 0,
  domain: null,
  name: '',// 短链标题
  invalid_start: null,// 开始时间
  invalid_end: null,// 到期时间
  rule: 2,// 跳转模式
  f_id: Number(route.params.id),// 短链分组
  notice_setting_id: '',// 通知方式id
  notice_time_start: '',// 通知开始时间
  notice_time_end: '', // 通知结束时间
  section_time: []
}
// 短链弹窗数据
const createShortLink = reactive({
  showCreateLinkDialog: false,
  showBatchCreateLinkDialog: false,
  showOperateSelect: false,
  createDialogTitle: '创建短链',
  tableLoading: false,
  activeName: 'oneToOne',
  tableMaxHeight: window.innerHeight - 297,
  customSetting: false,// 自定义设置开关
  expirationNotice: false,// 到期通知开关
  shortLinkTableData: [],// 短链表格数据
  shortLinkTotal: 0,// 短链总数量
  shortLinkValidity: 'permanent',// 短链有效期 permanent:永久,customize:自定义
  queryForm:{// 查询表单
    page: 1,
    limit: 5,
    f_id: null,
  },
  queryName: '',// 查询内容
  creating: false,// 创建loading
  createLinkForm: JSON.parse(JSON.stringify(createFormData)),
  shortLinkGroupList:[],// 短链分组列表
  customDomainList:[],// 短链域名下拉
  noticeMethod: '1',// 通知渠道
  noticeName: '邮箱',// 通知方式标题
  noticeAccountList:[],// 通知账户下拉列表
})
let { createLinkForm } = toRefs(createShortLink)

const resizeHeight = ()=> createShortLink.tableMaxHeight = window.innerHeight - 297
onMounted(()=> window.addEventListener('resize', resizeHeight))
onUnmounted(()=> window.removeEventListener('resize', resizeHeight))
// 校验域名
const { validateUrl } = validateF()
// 表单验证规则
const shortLinkFormRules = {
  [`short[${0}].to_url`]:[
    { required: true,message: '请输入跳转链接' },
    { validator: validateUrl }
  ],
  name: [{ required: true, message: '短链标题不能为空' }],
  domain:[{ required: true, message: '请选择短链域名' }],
  rule:[{ required: true, message: '请选择跳转模式' }],
  section_time:[{ required: true, message: '请选择通知时间' }],
  shortLink: [
    {
      required: true,
      validator: (rule, value, callback)=>{
        if(value.trim()){
          let urlReg = /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i
          let valueArr = removeEmpty(value.trim().split('\n'))
          let nameArr = removeEmpty(createShortLink.createLinkForm.shortName.trim().split('\n'))
          if(valueArr.length === nameArr.length){
            proxy.$refs.shortNameItemRef.clearValidate()
          }else if(nameArr.length > 0){
            proxy.$refs.batchCreateLinkFormRef.validateField(['shortName'])
          }
          valueArr.forEach(item => !urlReg.test(item) ? callback(new Error('部分链接输入有误')) : '')
          valueArr.length <= 50 ?  callback() : callback(new Error('跳转链接不能超过50条'))
        }else{
          callback(new Error('跳转链接不能为空'))
        }
      }
    }
  ],
  shortName: [
    {
      required: true,
      validator: (rule, value, callback)=>{
        if(value.trim()){
          let valueArr = removeEmpty(value.trim().split('\n'))
          let linkArr = removeEmpty(createShortLink.createLinkForm.shortLink.trim().split('\n'))
          valueArr.length === linkArr.length ? callback() : callback(new Error('短链标题与跳转链接不匹配'))
        }else{
          callback(new Error('短链标题不能为空'))
        }
      }
    }
  ],
  url:[
    { required: true, message: '请输入自定义短链' },
    {
      validator: (rule, value, callback)=>{
        if(value){
          if (/[\u4E00-\u9FA5]/g.test(value)) {
            callback("不能输入汉字")
          }else if(value.indexOf('/') !== -1){
            callback("不能含有/号")
          }else{
            checkShort({ url:value, id:editShortLink.formData.id }).then(res=>{
              res.code === 0 ? callback() : callback(new Error(res.msg))
            }).catch(err=>{})
          }
        }
      },
      trigger: 'blur'
    }
  ],
  invalid_end:[
    {
      required: true,
      validator: (rule, value, callback) => {
        if((createShortLink.shortLinkValidity === 'customize' || editShortLink.shortLinkValidity === 'customize') && !value){
          callback(new Error('请选择到期时间'))
        }else{
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  notice_setting_id:[{ required: true, message:'请选择通知账户' }],
}
// 复制短链
const copyShort = shortUrl=>{
  copySome(shortUrl,()=> proxy.$message.success('复制成功'))
}
// 清除数组中的空值
const removeEmpty = arr=>{
  for(let i = 0; i < arr.length; i++) {
    if(arr[i] === '' || typeof(arr[i]) == 'undefined' || arr[i] == null) {
      arr.splice(i,1)
      i -= 1 // 删除空元素后，循环的下标减1
    }
  }
  return arr
}
// 获取短链列表
const getShortLink = async id=> {
  createShortLink.tableLoading = true
  id ? createShortLink.queryForm.f_id = id : ''
  const res = await getShort(createShortLink.queryForm)
  if(res.code === 0){
    if(createShortLink.queryName){
      createShortLink.shortLinkTableData = res.data.short.data.filter(item => `${item.domain_name}/${item.url}`.indexOf(createShortLink.queryName) !== -1 || (item.name).indexOf(createShortLink.queryName) !== -1 ? item : '')
      createShortLink.shortLinkTotal = createShortLink.shortLinkTableData?.length
    } else {
      createShortLink.shortLinkTotal = res.data.short.total
      createShortLink.shortLinkTableData = res.data.short.data
    }
    createShortLink.tableLoading = false
  }else{
    proxy.$message.error(res.msg)
  }
}
// 搜索短链
let timer = null
const searchInput = val=>{
  if(val){
    clearTimeout(timer)
    timer = setTimeout(()=> {
      createShortLink.queryForm.page = 1
      createShortLink.queryForm.limit = 50
      getShortLink(route.params.id)
    },500)
  }else{
    createShortLink.queryForm.page = 1
    createShortLink.queryForm.limit = 5
    getShortLink(route.params.id)
  }
}
const searchShort = ()=> createShortLink.queryName ? getShortLink : proxy.$message.error('输入不能为空')
// 获取短链域名
const getCustomDomain = async ()=>{
  const res = await domainListApi({ type:3 })
  res.code === 0 ? createShortLink.customDomainList = res.data.data : proxy.$message.error(res.msg)
}
getShortLink(route.params.id)
getCustomDomain()
onBeforeRouteUpdate(to => {
  createShortLink.shortLinkTotal = 0
  createShortLink.queryForm.page = 1
  createShortLink.queryForm.limit = 5
  getShortLink(to.params.id)
})
// 切换每页显示数量
const handleSizeChange = val=>{
  createShortLink.queryForm.page = 1
  createShortLink.queryForm.limit = val
  getShortLink(route.params.id)
}
// 切换页码
const handleCurrentChange = val=>{
  createShortLink.queryForm.page = val
  getShortLink(route.params.id)
}
// 打开创建链接或批量创建对话框
const openCreateLinkDialog = type=>{
  proxy.$refs.createLinkFormRef ? proxy.$refs.createLinkFormRef.resetFields() : ''
  createShortLink.createLinkForm = JSON.parse(JSON.stringify(createFormData))
  createShortLink.createLinkForm.f_id = Number(route.params.id)
  createShortLink.createLinkForm.short = [{ to_url: '' }]
  if(type === 'create'){
    createShortLink.createDialogTitle = '创建短链'
    createShortLink.customSetting = false
    createShortLink.showCreateLinkDialog = true
  }else if(type === 'batch'){
    createShortLink.showBatchCreateLinkDialog = true
  }
}
// 打开创建短链对话框后
const opendCreateDialog = ()=> {
  if(createShortLink.createDialogTitle === '创建副本' && proxy.$refs.createLinkFormRef){
    proxy.$refs.createLinkFormRef.validateField(['url'])
    // proxy.$refs.createLinkFormRef.scrollToField('url')
  }
}
// 添加跳转链接
const addJumpLink = short=> short.length < 10 ? short.push({ to_url: '' }) : proxy.$message.warning('最多添加10条域名')
// 移除跳转链接
const removeJumpLink = (domain,type)=>{
  if(type === 'create'){
    let index = createShortLink.createLinkForm.short.indexOf(domain)
    createShortLink.createLinkForm.short.length > 1 && index !== -1 ? createShortLink.createLinkForm.short.splice(index, 1) : ''
  }else if(type === 'edit'){
    let index = editShortLink.formData.short.indexOf(domain)
    if(editShortLink.formData.short.length > 1 && index !== -1){
      proxy.$refs.toUrlRef.clearValidate()
      if(domain.id){
        editShortLink.to_url_id.push(domain.id)
        deleteCode({ id:editShortLink.to_url_id }).then(res=>{
          if(res.code === 0){
            editShortLink.afterRemove = true
            proxy.$message.success('移除成功')
          }else{
            proxy.$message.error(res.msg)
          }
        }).catch(err=>{})
        editShortLink.to_url_id = []
      }
      editShortLink.formData.short.splice(index, 1)
    }
  }
}
// 创建短链自定义设置开关  关闭自定义设置开关后清空到期时间和自定义短链的数据
const customSetChange = val=> !val ? createShortLink.createLinkForm.invalid_end = createShortLink.createLinkForm.url = null : ''
// 切换短链有效期
const changeValidity = val=>{
  if(val === 'permanent'){
    createShortLink.createLinkForm.invalid_end = null
    proxy.$refs.invalidEndRef.resetField()
  }
}
// 选择通知账户
const selectNoticeAccount = val=>{}
// 查询通知方式
let switchingNotice = ref(true)
const queryNotice = type=>{
  createShortLink.noticeAccountList = []
  switchingNotice.value = true
  noticeSetList({ type }).then(res=>{
    if(res.code === 0){
      createShortLink.noticeAccountList = res.data.data
      switchingNotice.value = false
    }
  }).catch(err=>{})
}
// 到期通知开关
const noticeChange = val=> {
  if(val){
    createShortLink.noticeMethod = '1'
    createShortLink.createLinkForm.notice_setting_id = ''
    !editShortLink.formData.notice_setting_id ? editShortLink.formData.notice_setting_id = '' : ''
    createShortLink.createLinkForm.section_time = editShortLink.formData.section_time = []
    queryNotice('邮箱')
  } else {
    proxy.$refs.noticeAccountRef ? proxy.$refs.noticeAccountRef.resetField() : ''
  }
}
// 切换通知渠道
const switchNotice = notice => {
  proxy.$refs.noticeAccountRef.resetField()
  notice == 1 ? createShortLink.noticeName = '邮箱' : ''
  notice == 2 || notice == 3 ? createShortLink.noticeName = '手机' : ''
  notice == 5 ? createShortLink.noticeName = '钉钉' : ''
  notice == 7 ? createShortLink.noticeName = '企业微信' : ''
  notice == 8 ? createShortLink.noticeName = '飞书' : ''
  queryNotice(createShortLink.noticeName)
}
// 打开通知账户设置
const openNoticeSet = ()=>{
  router.push('/user-center/user-account/user-setting')
  localStorage.setItem('switchTabSet','noticeSet')
  localStorage.setItem('activeName',createShortLink.noticeName)
}
// 创建短链
const createShortChain = ()=>{
  proxy.$refs.createLinkFormRef.validate(async validate=>{
    if(validate){
      createShortLink.creating = true
      if(!createShortLink.expirationNotice){
        editShortLink.formData.notice_time_start = editShortLink.formData.notice_time_end = editShortLink.formData.notice_setting_id = ''
      }else{
        createShortLink.createLinkForm.notice_time_start = proxy.$filter('YYY-mm-dd HH:MM:SS',createShortLink.createLinkForm.section_time[0])
        createShortLink.createLinkForm.notice_time_end = proxy.$filter('YYY-mm-dd HH:MM:SS',createShortLink.createLinkForm.section_time[1])
      }
      createShortLink.createLinkForm.invalid_start = proxy.$filter('YYY-mm-dd HH:MM:SS',new Date(Date.now()))
      const res = await addShort(createShortLink.createLinkForm)
      if(res.code === 0){
        proxy.$message.success(res.msg)
        createShortLink.showCreateLinkDialog = false
        emit('update:refreshGroupList')
        await getShortLink(route.params.id)
      }else{
        createShortLink.creating = false
        proxy.$message.error(res.msg)
      }
    }
  })
}
// 批量创建短链
const batchCreate = ()=>{
  proxy.$refs.batchCreateLinkFormRef.validate(validate=>{
    if(validate){
      createShortLink.creating = true
      let msgTip = proxy.$notify({
        title: '提示',
        message: '正在批量创建短链中,请不要关闭页面~',
        showClose: false,
        duration: 0,
      })
      let { shortLink, shortName } = createShortLink.createLinkForm
      let linkArr = removeEmpty(shortLink.trim().split('\n'))
      let nameArr = removeEmpty(shortName.trim().split('\n'))
      let formDataArray = []
      let arrLength = 0
      if(nameArr.length === linkArr.length){
        arrLength = nameArr.length
        for(let i = 0; i < arrLength; i++){
          let batchForm = JSON.parse(JSON.stringify(createShortLink.createLinkForm))
          batchForm.short[0].to_url = linkArr[i]
          batchForm.name = nameArr[i]
          formDataArray.push(batchForm)
        }
        let errArr = []
        let successArr = []
        for (let j = 0; j < formDataArray.length; j++){
          setTimeout(async ()=>{
            const res = await addShort(formDataArray[j])
            res.code === 0 ? successArr.push(res) : errArr.push(res)
            if(Number(j+1) === arrLength){
              msgTip.close()
              createShortLink.creating = createShortLink.showBatchCreateLinkDialog = false
              await getShortLink(route.params.id)
              emit('update:refreshGroupList')
              successArr.length > 0 ? proxy.$notify({ title: '成功', message: `成功创建${successArr.length}条短链`, type: 'success' }) : ''
              errArr.length > 0 ? proxy.$notify({ title: '失败', message: `失败了${errArr.length}条短链`, type: 'error', offset: successArr.length > 0 ? 100 : 0 }) : ''
            }
          },j * 400)
        }
      }
    }
  })
}
// 修改对象的键
const modifyKey = item=>{
  let keyMap = { codeList: 'short' }
  return Object.keys(item).reduce((newData, key) => {
    let newKey = keyMap[key] || key
    newData[newKey] = item[key]
    return newData
  }, {})
}
// 创建副本
const createCopy = row=>{
  createShortLink.showCreateLinkDialog = true
  createShortLink.createDialogTitle = '创建副本'
  let newRow = JSON.parse(JSON.stringify(row))
  modifyKey(newRow).short.forEach(item => item.id ? delete item.id : '')
  createShortLink.createLinkForm = modifyKey(newRow)
  createShortLink.activeName = createShortLink.createLinkForm.short.length > 1 ? 'oneToMore' : 'oneToOne'
  createShortLink.customSetting = true
  createShortLink.createLinkForm.name += '-副本'
  createShortLink.shortLinkValidity = !createShortLink.createLinkForm.invalid_end ? 'permanent' : 'customize'
}
// 编辑短链数据
const editShortLink = reactive({
  showDialog: false,
  formData: {},
  editing: false,
  shortLinkValidity: '',// 短链有效期
  afterRemove: false,
  noticeMethod: '',
  expirationNotice: false,
  editUrl: ''
})
// 打开编辑短链对话框
const openEditDialog = row=>{
  editShortLink.showDialog = true
  editShortLink.formData = modifyKey(JSON.parse(JSON.stringify(row)))
  editShortLink.editUrl = editShortLink.formData.domain_name+'/'+editShortLink.formData.url
  editShortLink.to_url_id = []
  editShortLink.shortLinkValidity = !editShortLink.formData.invalid_end ? 'permanent' : 'customize'
  editShortLink.expirationNotice = !!editShortLink.formData.notice_setting_id
  noticeChange(editShortLink.expirationNotice)
  editShortLink.formData.section_time = [new Date(editShortLink.formData.notice_time_start), new Date(editShortLink.formData.notice_time_end)]
}
// 编辑短链
const editShortUrl = ()=>{
  proxy.$refs.editShortLinkFormRef.validate(async validate=>{
    if(validate){
      editShortLink.editing = true
      editShortLink.shortLinkValidity === 'permanent' ? editShortLink.formData.invalid_end = null : ''
      if(!editShortLink.expirationNotice){
        editShortLink.formData.notice_time_start = editShortLink.formData.notice_time_end = editShortLink.formData.notice_setting_id = ''
      }else{
        editShortLink.formData.notice_time_start = proxy.$filter('YYY-mm-dd HH:MM:SS',editShortLink.formData.section_time[0])
        editShortLink.formData.notice_time_end = proxy.$filter('YYY-mm-dd HH:MM:SS',editShortLink.formData.section_time[1])
      }
      const res = await editShort(editShortLink.formData)
      if(res.code === 0){
        proxy.$message.success(res.msg)
        editShortLink.showDialog = false
        await getShortLink(route.params.id)
      }else{
        editShortLink.editing = false
        proxy.$message.error(res.msg)
      }
    }
  })
}
// 表格选中状态切换时执行的方法
let selectId = ref([])
const selectTableCheckbox = val =>{
  selectId.value = []
  createShortLink.showOperateSelect = val.length !== 0
  val.forEach(item => selectId.value.push(item.id))
}
// 导出选中
const exportSelect = async id=>{
  window.open(baseUrl+'/select_execl?id='+id)
}
// 下载选中二维码
const downloadSelect = ()=>{
  let imgArr = []
  createShortLink.shortLinkTableData.forEach(item=>{
    if(selectId.value?.includes(item.id)){
      let image = new Image()
      image.setAttribute('crossOrigin', 'anonymous')
      // image.src = baseUrl+'/'+item.code // 服务器短链二维码
      image.src = '/img/404-images/下载测试二维码.png' // 本地环境测试图片
      image.onload = ()=>{
        imgArr.push({ name: item.name, baseImg: getImgBase64(image) })
        imgArr.length === selectId.value.length ? downloadImgZip(imgArr,`短链-${props.groupTitle}`) : ''
      }
    }
  })
}
// 移动分组数据
const moveGroup = reactive({
  showMoveDialog:false,
  groupList:[],
  moveForm:{
    need_ids: [],
    to_f_id: '',
  },
  moving: false,
  moveable: {}
})
// 打开移动分组对话框
const openMoveDialog = async id=>{
  moveGroup.showMoveDialog = true
  moveGroup.groupList = []
  moveGroup.moveForm.need_ids = id
  const res = await getShort({ type:2 })
  if(res.code === 0){
    moveGroup.groupList = res.data.short
    if(route.params.id != 0 && moveGroup.groupList.length > 0){
      moveGroup.groupList.unshift({ name:'默认分组', id:0 })
      moveGroup.groupList.forEach((item,index)=>item.id == route.params.id ? moveGroup.groupList?.splice(index,1) : '')
    }
  }else{
    proxy.$message.error(res.msg)
  }
}
// 确定移动分组
const moveShortLink = ()=>{
  proxy.$refs.shortLinkMoveFormRef.validate(async validate=>{
    if(validate){
      moveGroup.moving = true
      const res = await batchChange(moveGroup.moveForm)
      if(res.code === 0){
        proxy.$message.success(res.msg)
        moveGroup.showMoveDialog = false
        emit('update:refreshGroupList')
        await router.push(`/user-center/short-link-manage/${moveGroup.moveForm.to_f_id}`)
      }else{
        moveGroup.moving = false
        proxy.$message.error(res.msg)
      }
    }
  })
}
// 删除短链
const deleteShortLink = id=>{
  proxy.$confirm('移至回收站后短链接依然可以正常数据统计和跳转，可以随时恢复至分组,是否移至回收站？','移至回收站',{
    closeOnClickModal:false,
    customClass:'commonMessageBox',
    type: 'warning'
  }).then(async ()=>{
    const res = await delShort({ id, type:1 })
    if(res.code === 0){
      proxy.$message.success(res.msg)
      emit('update:refreshGroupList')
      await getShortLink(route.params.id)
    }else{
      proxy.$message.error(res.msg)
    }
  }).catch(err=>{})
}
// 切换域名数据
const changeDomain = reactive({
  changing:false,
  domainDialog: false,
  domainForm:{
    domain:null,
    short_id:null
  }
})
// 打开切换域名
const openChangeDomain = item=>{
  changeDomain.domainDialog = true
  changeDomain.domainForm.domain = item.domain
  changeDomain.domainForm.short_id = item.id
}
// 切换域名
const cutoverDomain = async ()=>{
  changeDomain.changing = true
  const res = await switchDomain(changeDomain.domainForm)
  if(res.code === 0){
    proxy.$message.success(res.msg)
    changeDomain.domainDialog = false
    await getShortLink(route.params.id)
  }else{
    proxy.$message.error(res.msg)
    changeDomain.changing = false
  }
}
// 数据统计数据
const statisticsData = reactive({
  showStatisticsDialog:false,
  type:1,
  shortData:{},// 短链数据
  formData:{// 查询数据
    type: 1,// 短链查询
    short_id: null,// 短链id
    short_url: '',// 短链接
  }
})
// 打开数据统计弹窗
const openStatistics = val=>{
  statisticsData.formData.short_id = val.id
  statisticsData.formData.short_url = statisticsData.shortData.short_url = val.domain_name+'/'+val.url
  statisticsData.shortData.name = val.name
  statisticsData.showStatisticsDialog = true
}
// 关闭对话框
const closeDialog = refName => {
  switch (refName){
    case 'editShortLinkFormRef':
      editShortLink.afterRemove = editShortLink.editing = false
      break
    case 'switchDomainFormRef':
      changeDomain.changing = false
      break
    case 'shortLinkMoveFormRef':
      moveGroup.moving = false
      break
    default:
      createShortLink.expirationNotice = createShortLink.creating = false
      createShortLink.shortLinkValidity = 'permanent'
      break
  }
  proxy.$refs[refName].resetFields()
}
</script>

<style lang="less" scoped>
.short-link-group-container{
    height: 100%;
    border: none;

    &:deep(.el-card__body ){
      height: 100%;
      padding-left: 32px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;

      .card-title {
        height: 32px;

        .card-title-left {
          display: flex;
          align-items: center;
          height: inherit;

          h3 {
            margin-right: 6px;
            font-weight: normal;
          }

          .sub-title {
            margin: 0 30px 0 15px;
          }

          .el-button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 80px;
            height: 32px;
            font-size: 14px;
            margin-right: 6px;
          }
        }
      }
      .create-link-operate-box {
        height: 40px;
        line-height: 40px;
        margin: 20px 0 10px;
        .create-link-operate-btn {
          display: flex;
          align-items: center;
          .el-link{
            &:hover{
              color: @subtitle;
            }
            &:not(:nth-last-of-type(1)){
              margin-right: 30px;
            }
          }
          .select-length{
            margin-right: 20px;
            color: @primary;
            font-size: 14px;
          }
        }
        .create-link-input{
          max-width: 70%;
          display: flex;
        }
      }

      .el-table {
        .el-table__body-wrapper{
          overflow-x: auto!important;
        }
        .short-link-info {
          .short-link-title {
            color: @title;
            font-size: 16px;
          }
        }

        .short-link-date {
          color: #97989d;
          font-size: 12px;
        }

        .cross-head,
        .cross-content {
          font-size: 12px;
          line-height: 10px;
          color: @secondary;
        }

        .cross-content {
          font-weight: bold;
        }

        .short-link-box {
          display: flex;
          align-items: center;
          .short-link-content {
            margin-right: 25px;
            .el-tag {
              font-size: 12px;
              cursor:pointer;
            }
          }
        }
        .cell{
          img {
            width: 20px;
            height: 20px;
            cursor: pointer;
          }
        }
        .btn-operate{
          display: flex;
          img:nth-of-type(1){
            margin-right: 20px;
          }
        }
        .operate-btn-group {
          display: flex;
          align-items: center;

          img {
            margin-right: 20px;
          }
        }
        .el-table__body-wrapper {
          overflow-x: hidden;
        }
      }
    }
  }

.el-dialog{
  height: 900px;
  max-height: 900px;
}
.el-tabs{
  .el-tabs__header{
    .el-tabs__nav-wrap{
      .el-tabs__nav-scroll{
        &:deep(.el-tabs__nav){
          .el-tabs__active-bar{
            width: 40px;
          }
          .el-tabs__item{
            width: 90px;
            height: 22px!important;
            line-height: unset!important;
            &:hover{
              color: @secondary!important;
            }
          }
        }
      }
    }
  }
  .el-tabs__content{
    .el-tab-pane{
      .create-short-link-tab-title{
        display: flex;
        align-items: center;
        line-height: 16px;
        img{
          width: 16px;
          height: 16px;
        }
      }
    }
  }
}

.create-short-link-form {
  margin-top: 10px;

  &:deep(.el-form-item){
    .el-form-item__label {
      color: @title;
      line-height: unset;
      font-size: 16px;
      padding-bottom: 10px;
    }

    .el-form-item__content {
      line-height: unset;
      .jump-link-input{
        display: flex;
        align-items: center;
      }
      .el-select{
        width: 100%;
      }
      .jump-moder-alert{
        margin-top: 20px;
      }
      .select-group {
        width: 100%;
      }
      .edit-text{
        color: #606266;
      }
      .el-date-editor{
        width: 100%;
      }
    }
  }
  &:deep(.textarea-input-item){
    .el-form-item__label{
      .short-length{
        font-size: 13px;
        color: @secondary;
        padding-right: 8px;
        float: right;
      }
    }
  }
  .custom-domain-item{
    margin-top: 15px;
  }
  .switch-form-item{
    display: flex;
    .el-switch{
      margin-left: 20px;
    }
  }

  .el-divider {
    margin: 50px 0 30px;
    .el-divider__text {
      color: @title;
      font-size: 16px;
    }
  }
}
.batch-create-short-link-form{
  margin-top: 0!important;
  .el-form-item{
    .el-form-item__content{
      .el-textarea{
        &:deep(.el-textarea__inner){
          white-space: nowrap;
          overflow: auto;
        }
      }
    }
  }
}
.el-dropdown-menu {
  &:deep(.el-dropdown-menu__item){
    line-height: 28px;
    letter-spacing: 2px;
  }
}
</style>

<style lang="less">
.create-link-dialog{
  .el-dialog__body{
    height: 60vh;
    overflow: auto;
    .notice-set{
      display: flex;
      align-items: center;
      line-height: unset;
      color: @subtitle;
      div{
        line-height: unset;
      }
      .el-button{
        min-height: unset;
      }
    }
  }
}
.el-form{
  .short-link-life{
    .el-form-item__content{
      .short-link-life-content{
        display: flex;
        align-items: center;
        height: 32px;
        .el-radio-group{
          width: 40% !important;
          display: flex;
          align-items: center;
          .el-radio{
            width: 50%;
          }
        }
        .el-date-editor--datetime{
          width: 60% !important;
        }
      }
      .el-form-item__error{
        left: 40%;
      }
    }
  }
}

.short-link-move-dialog{
  .el-form{
    .el-form-item{
      .el-form-item__content{
        .el-select{
          width: 100%;
        }
      }
    }
  }
}
.edit-link-dialog{
  .el-form{
    margin-top: 0;
    .el-form-item{
      .el-form-item__content{
        .el-date-editor--datetime{
          width: 100%;
        }
      }
    }
  }
}
.download-qrcode-popper{
  .download-qrcode-btn{
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    background-color: @primary;
    color:#FFFFFF;
    text-decoration: none;
    border-radius: 3px;
    text-align: center;
    &:hover{
      background-color: @primary-active;
    }
  }
}
.jump-link-popper{
  line-height: 1.8;
  .el-popper__arrow{
    display: unset;
  }
}
.switch-domain-dialog{
  .el-form{
    .el-form-item{
      .el-select{
        width: 100%;
      }
    }
  }
}
</style>
